<template>
    <div class="app-container atom">
        <div class="big_box">
            <el-form size="mini" label-width="70px" :inline="true">
                <el-form-item label="编辑">
                    <el-switch v-model="form.editOpen"/>
                </el-form-item>
<!--                <el-form-item label="分数拆分">-->
<!--                    <el-switch v-model="form.isSplitScore" active-value="1" inactive-value="2"/>-->
<!--                </el-form-item>-->

                <el-button size="mini" type="success" icon="el-icon-plus" @click="addDataLine(null)" plain round>添加一行</el-button>
                <el-button size="mini" type="info" icon="el-icon-document-copy" @click="open = true" plain round>批量添加</el-button>

                <el-button-group style="float: right">
                    <el-button size="mini" :disabled="form.editOpen" type="primary" icon="el-icon-s-promotion" @click="submitForm" plain round>保存</el-button>
                </el-button-group>
                <el-form-item style="float: right" label="总分">
                    <el-tag style="font-weight: bold;font-size: 14px;" type="danger">{{form.total}}</el-tag>
                </el-form-item>
            </el-form>

            <div class="table_class">
                <el-table :data="form.steps" size="mini" border height="770" :key="form.editOpen+''">
                    <el-table-column align="center" prop="title">
                        <template slot="header" slot-scope="scope">
                            <el-input v-if="form.editOpen" v-model="form.name" @change="$forceUpdate()" style="width: 300px;margin: 0 auto;" size="mini"  clearable placeholder="输入评分表标题"/>
                            <span v-else>{{ form.name }}</span>
                        </template>

                        <el-table-column header-align="center" align="left" prop="step">
                            <template slot="header" slot-scope="scope">
                                <el-input v-if="form.editOpen" v-model="form.stepName" style="width: 200px;margin: 0 auto;" size="mini"  clearable placeholder="自定义名称"/>
                                <span v-else>{{ form.stepName }}</span>
                            </template>
                            <template slot-scope="scope">
                                <el-input type="textarea" v-if="form.editOpen" v-model="scope.row.step" @input="$forceUpdate"  :rows="2"/>
                                <span v-else>{{ scope.row.step }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column v-if="form.isSplitScore == '1'" align="center" label="分数拆分" prop="score" width="150">
                            <template slot-scope="scope">
                                <el-input v-if="form.editOpen" v-model="scope.row.splitScore" controls-position="right" placeholder="分数分割(英文逗号分割)" size="mini" style="width: 120px" clearable/>
                                <span v-else>{{ scope.row.splitScore }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column align="center" label="分数" prop="score" width="110">
                            <template slot-scope="scope">
                                <div v-if="scope.row.needScore ===1">
                                    <el-input-number v-if="form.editOpen" v-model="scope.row.score" @change="sumTotal" controls-position="right" size="mini"  style="width: 80px"/>
                                    <span v-else>{{ scope.row.score }}</span>
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column align="center" label="操作" width="90">
                            <template slot-scope="scope">
                                <el-button type="text" size="mini" icon="el-icon-delete" :disabled="!form.editOpen" @click="deleteDataLine(scope.$index)"></el-button>
                                <el-button v-if="scope.$index !== 0" type="text" size="mini" icon="el-icon-arrow-up" :disabled="!form.editOpen" @click="upLine(scope.$index)"></el-button>
                                <el-button v-if="scope.$index !== form.steps.length-1" type="text" size="mini" icon="el-icon-arrow-down" :disabled="!form.editOpen" @click="downLine(scope.$index)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table>
                <el-row :gutter="10">
                    <el-col :span="4">
                        <el-row :gutter="10">
                            <el-col :span="6">
                                图片
                            </el-col>
                            <el-col :offset="6" :span="2" v-if="form.imageUrl">
                                <el-link type="info" icon="el-icon-view" @click="handlePictureCardPreview"></el-link>
                            </el-col>
                            <el-col :offset="1" :span="2" v-if="form.imageUrl">
                                <el-link type="info" icon="el-icon-delete" @click="handleRemove"></el-link>
                            </el-col>
                        </el-row>
                        <el-upload ref="image_upload" accept="image/*" :headers="upload.headers" :action="upload.url" list-type="picture-card" :limit="1"
                                   :show-file-list="false" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess">
                            <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-col>
                    <el-col :span="10">
                        <span>题目</span>
                        <el-input type="textarea" :rows="6" v-model="form.question" :disabled="!form.editOpen" placeholder="题目"/>
                    </el-col>
                    <el-col :span="10">
                        <span>备注</span>
                        <el-input type="textarea" :rows="6" v-model="form.remark" :disabled="!form.editOpen" placeholder="备注"/>
                    </el-col>
                </el-row>
                <el-dialog :visible.sync="imageVisible" append-to-body :modal="false">
                    <img width="100%" :src="form.imageUrl" alt="">
                </el-dialog>
            </div>

            <el-drawer title="批量添加" :visible.sync="open" width="30%" :modal="false">
                <div style="width: 90%;margin-top: 20px;margin-left: 20px">
                    <div class="el-upload__tip">将excel中的步骤、分值复制到此处，会自动填入</div>
                    <el-form label-width="0px">
                        <el-form-item>
                            <el-input type="textarea" :rows="15" v-model="moreStep" ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="success" icon="el-icon-document-copy" @click="importMoreStep">导入</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-drawer>
        </div>
    </div>
</template>

<script>

import {isEmptyStr, isNotEmpty, isnumber} from "@/utils/zzDouUtils/objUtil";
import {arrSumByKey, swap, fillNode, deleteNode} from "@/utils/zzDouUtils/arrayUtil";
import {getToken} from "@/utils/auth";

export default {
    name: "atom",
    props: {
        form: {
            type: Object
        }
    },
    data() {
        return {
            open: false,
            moreStep: null,
            imageVisible: false,
            // 用户导入参数
            upload: {
                // 是否禁用上传
                isUploading: false,
                // 设置上传的请求头部
                headers: {Authorization: "Bearer " + getToken()},
                // 上传的地址
                url: process.env.VUE_APP_BASE_API + "/common/minio/upload"
            },
        }
    },
    created() {
    },
    watch:{
        'form.isSplitScore'(n,o){
            if (n == '1'){
                this.form.steps = fillNode(this.form.steps,'splitScore',null);
            }else{
                this.form.steps = deleteNode(this.form.steps,'splitScore');
            }
        }
    },
    methods: {
        /** 提交 */
        submitForm(){
            this.$emit("submitForm");
        },
        sumTotal(){
            this.form.total = arrSumByKey(this.form.steps,'score');
        },
        /** 添加一行 */
        addDataLine(data) {
            let obj = isNotEmpty(data) ? data : {step: '步骤' + (this.form.steps.length + 1), score: 0};
            if (this.form.isSplitScore == '1'){
                data['splitScore'] = null;
            }
            this.form.steps.push(obj);
            this.sumTotal();
        },
        /** 删除一行 */
        deleteDataLine(index) {
            this.$delete(this.form.steps, index);
            this.form.total = arrSumByKey(this.form.steps,'score');
            this.sumTotal();
        },
        /** 上移 */
        upLine(index){
            if (index != 0){
                this.form.steps = swap(this.form.steps,index,index-1)
            }
        },
        /** 下移 */
        downLine(index){
            if (index != this.form.steps.length-1){
                this.form.steps = swap(this.form.steps,index,index+1)
            }
        },
        /** 批量导入 */
        importMoreStep(){
            if (isEmptyStr(this.moreStep)){
                this.$notify({title: '导入失败', message: '复制的内容不可为空', type: 'warning'});
                return;
            }
            try{
                let lines = this.moreStep.split('\n');
                for (let i = 0; i < lines.length; i++) {
                    const line = lines[i];
                    if (isEmptyStr(line)){
                        continue;
                    }
                    const lineSplit = line.split('\t');
                    let data;
                    if (lineSplit.length === 1){//没有分数
                        data = {step: line, score: 0}
                    }else if(lineSplit.length === 2){//有分数
                        data = {step: lineSplit[0], score: isnumber(lineSplit[1]) ? parseFloat(lineSplit[1]) : 0}
                    }else{
                        this.$notify({title: '导入失败', message: '格式有误', type: 'error'});
                        return;
                    }
                    this.addDataLine(data)
                }
                this.moreStep = null;
                this.sumTotal();
                this.$notify({title: '导入成功', message: '', type: 'success'});
                this.open = false;
            }catch (e){
                this.$notify({title: '导入失败', message: '格式有误', type: 'error'});
            }
        },
        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
            this.upload.isUploading = true;
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.$refs.image_upload.clearFiles();
            this.$set(this.form,'imageUrl',response.msg);
        },
        /** 查看图片 */
        handlePictureCardPreview(){
            this.imageVisible = true;
        },
        /** 删除图片 */
        handleRemove(){
            this.$delete(this.form, 'imageUrl')
        }
    }
};
</script>
<style scoped>
span{
    white-space: pre-wrap;
}
.atom .big_box {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.atom .table_class{
    width: 100%;
    overflow: auto;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
}

/deep/ .avatar {
    width: 150px;
    height: 150px;
    display: block;
}
</style>
